<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax</title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			height: 400px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriends"></span></p>		
	</div>

	省<select id="province">
		<option>广西</option>
	</select>
	市<select id="city">
		<option>柳州</option>
	</select>
	区<select id="area">
		<option>鱼峰</option>
	</select>



	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$.get('student.json',function(res){
			$('#sname').text(res.name);
			$('#sage').text(res.age);

			var fname='';
			for(var i=0;i<res.friends.length;i++){
				fname +=res.friends[i].name +"  ";
			}

			$('#sfriends').text(fname);			
		});
		
		/*把省的信息添加到下拉列表*/
		$.get('province.json',function(res){

			$('#province').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option>'+p.name+'</option>';
				$('#province').append(option);
			}
		})
			/*把城市的信息添加到下拉列表*/
			$.get('city.json',function(res){

			$('#city').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option value="'+p.id+'">'+p.name+'</option>';
				$('#city').append(option);
			}
		})
		
		/*把区的信息添加到下拉列表*/
			$.get('area.json',function(res){

			$('#area').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option>'+p.name+'</option>';
				$('#area').append(option);
			}
		})
			$('#city').change(function(){
				console.log($(this).val());
			})


			$('#city').change(function(){
				var cid=$(this).val();
				var tmp=[];
				$.get('area.json',function(res){
					for(var i=0;i<res.length;i++){
						if(res[i].pid==cid){
							tmp.push(res[i]);
						}
					}
					$('#area').empty();
					for(var j=0;j<tmp.length;j++){
						var option='<option>'+tmp[j].name+'</option>';
						$('#area').append(option);
					};

				})
			})

	</script>

</body>
</html>